.star.smaller {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 5px;
    border-right-width: 10px;
    border-left-width: 10px;
    height: 0;
    margin-top: 5px;
    margin-bottom: 3.21429px;
    position: relative;
    width: 0;
}
.star.smaller:before,
.star.smaller:after {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 5px;
    border-right-width: 10px;
    border-left-width: 10px;
    content: '';
    display: block;
    height: 0;
    left: -10px;
    position: absolute;
    top: -5px;
    width: 0;
}
.star.smaller:before {
    transform: rotate(70deg);
}
.star.smaller:after {
    transform: rotate(-70deg);
}
.star,
.star.small {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    height: 0;
    margin-top: 9.375px;
    margin-bottom: 6.02679px;
    position: relative;
    width: 0;
}
.star:before,
.star.small:before,
.star:after,
.star.small:after {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    content: '';
    display: block;
    height: 0;
    left: -15px;
    position: absolute;
    top: -9.375px;
    width: 0;
}
.star:before,
.star.small:before {
    transform: rotate(70deg);
}
.star:after,
.star.small:after {
    transform: rotate(-70deg);
}
.star.medium {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 16.66667px;
    border-right-width: 25px;
    border-left-width: 25px;
    height: 0;
    margin-top: 16.66667px;
    margin-bottom: 10.71429px;
    position: relative;
    width: 0;
}
.star.medium:before,
.star.medium:after {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 16.66667px;
    border-right-width: 25px;
    border-left-width: 25px;
    content: '';
    display: block;
    height: 0;
    left: -25px;
    position: absolute;
    top: -16.66667px;
    width: 0;
}
.star.medium:before {
    transform: rotate(70deg);
}
.star.medium:after {
    transform: rotate(-70deg);
}
.star.large {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 27.58621px;
    border-right-width: 40px;
    border-left-width: 40px;
    height: 0;
    margin-top: 27.58621px;
    margin-bottom: 17.73399px;
    position: relative;
    width: 0;
}
.star.large:before,
.star.large:after {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 27.58621px;
    border-right-width: 40px;
    border-left-width: 40px;
    content: '';
    display: block;
    height: 0;
    left: -40px;
    position: absolute;
    top: -27.58621px;
    width: 0;
}
.star.large:before {
    transform: rotate(70deg);
}
.star.large:after {
    transform: rotate(-70deg);
}
html,
body {
    text-align: center;
    height: 100%;
    overflow: hidden;
}
html .star-container,
body .star-container {
    position: relative;
    top: 50%;
    margin-top: -50px;
}
html .star-container .star,
body .star-container .star {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
}